<template>
	<view class="padd-left-right">
		<view class="prove">
			<view class="prove-position">
				<text class="prove-audit" style="background-color: #62c2f5;" v-if="form.audit == '0'">未审批</text>
				<text class="prove-audit" style="background-color: #19be6b;" v-else-if="form.audit == '1'">已审批</text>
			</view>
			<view class="app-title">在职证明申请</view>
			<view class="app-list">申请时间：{{form.time}}</view>
			<view class="app-list">申请原因：{{form.reason}}</view>
			<view class="app-list">收件人：</view>
			<view class="app-list">联系方式：</view>
			<view class="app-list">地址：</view>
			<view class="app-list">预计收货日期：</view>

			<!-- 进行流程 -->
			<u-time-line class="conduct">
				<u-time-line-item>
					<template v-slot:content>
						<view style="display: flex;">
							<view style="flex: 20%;">
								<u-tag text="同意" type="info" shape="circle" />
							</view>
							<view style="flex: 20%;">集团人力资源部经理</view>
							<view style="flex: 30%;color: #62c2f5;">零服务</view>
							<view style="flex: 30%;text-align: center;">2019-12-06 22:30</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {}
			}
		},
		onLoad(options) {
			//接收 再将JSON字符串转为js对象即可
			this.form = JSON.parse(decodeURIComponent(options.row))
		}
	}
</script>

<style lang="scss" scoped>
	.prove {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.prove-position {
			position: absolute;
			top: 24rpx;
			right: 0;
			color: #FFFFFF;

			.prove-audit {
				padding: 6rpx 20rpx;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
			}
		}

		.app-title {
			font-size: 30rpx;
			font-weight: 700;
		}

		.app-list {
			margin: 10rpx 0;
		}

		.conduct {
			margin-top: 50rpx;
		}
	}
</style>
